<script setup>

import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import {onMounted, onUnmounted, ref} from "vue";
import MessageBox from "@/components/MessageBox.vue";
import Floating from "@/components/Floating.vue";

const state = ref({
  isTop: false,
  onMenuShow: false,
  messageBoxShow: false,
  headerFooter: true,
})
const scrollTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}
const checkScroll = () => {
  state.value.isTop = window.scrollY > window.innerHeight
}
onMounted(() => {
  window.addEventListener('scroll', checkScroll);
})
onUnmounted(() => {
  window.removeEventListener('scroll', checkScroll);
})
const onSubmit = (e) => {
  const body = `名字：${e.name}    邮箱：${e.email}    手机：${e.phone}    内容：${e.info}`;
  const msg = `Subject=信息咨询&Body=${body}`;
  window.open(`Mailto:kingsun@neocross.com?${msg}`);
}
const onArticleShow = (e) => {
  state.value.headerFooter = e;
  console.log('show', e)
}
</script>

<template>
  <view class="column">
    <Header v-if="state.headerFooter" @onArticleShow="onArticleShow"/>
    <RouterView/>
    <Footer v-if="state.headerFooter"/>
  </view>
  <Floating :show="state.isTop"
            :show-icon="state.headerFooter"
            :show-box="state.messageBoxShow"
            @onScrollTop="scrollTop"
            @onMessage="state.messageBoxShow=!state.messageBoxShow"/>
  <MessageBox :show="state.messageBoxShow" @onSubmit="onSubmit" @onClose="state.messageBoxShow=false"/>
</template>